<template>
  <div class="tableSelectDialogView">
    <el-input
      v-model="form.customerName"
      size="mini"
      placeholder="请输入内容"
      clearable
      readonly
      @click.native="openTableSelect"
    ></el-input>
    <SelectFromTableDialog
      ref="selectTable"
      type="radio"
      title="客户列表"
      :searchConfig="customerSearchConfig"
      :columns="customerColumns"
      :tableData="customerList"
      :total="customerTotal"
      @search="getCustomerList"
      @pager="getCustomerList"
      @submit="getCustomer"
    />
  </div>
</template>
<script>
import SelectFromTableDialog from '/@/components/SelectFromTableDialog';
export default {
  components: {
    SelectFromTableDialog,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      customerList: [],
      customerTotal: 0,
      customerSearchConfig: [
        {
          label: '单位名称',
          field: 'companyName',
        },
      ],
      customerColumns: [
        {
          type: 'radio',
          title: '',
          width: 60,
          editRender: {},
        },
        {
          field: 'companyName',
          title: '单位名称',
          editRender: {},
        },
        {
          field: 'contactsName',
          title: '负责人',
          editRender: {},
        },
        {
          field: 'contactsInfo',
          title: '联系方式',
          editRender: {},
        },
      ],
      form: {
        customerId: '',
        customerName: '',
      },
    };
  },
  created() {
    this.getCustomerList();
  },
  methods: {
    openTableSelect() {
      this.$refs.selectTable.dialogVisible = true;
    },
    inputText(treeData, id) {
      return 1;
    },
    getCustomerList(params = { page: 1, size: 10 }) {
      this.$api.getCustomerPage(params).then((res) => {
        this.customerList = res.data.list;
        this.customerTotal = res.data.total;
      });
    },
    getCustomer(data) {
      this.form.customerId = data.id;
      this.form.customerName = data.companyName;
      this.form.customerManagerName = data.contactsName;
      this.form.customerManagerNumber = data.contactsInfo;
      this.form.contractProp = data.contractProp;
      this.$emit('input', this.form.customerId);
    },
  },
};
</script>
<style lang="scss" scoped>
.tableSelectDialogView {
  width: 100%;
}
</style>
